<template>
  <div class="CreditNum">
    <van-overlay
      :show="show"
      :z-index=100
    />
    <van-loading v-if="show" color="#1989fa" size="50px"/>
    <van-nav-bar
      title="信用数值"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="signAwardInfo">
      <p>当前信用等级</p>
      <p><span>{{hierarchyNum}}</span></p>
      <p>
        <img :src="imgUrl" alt="">
      </p>
    </div>
    <div class="exchange">
      <div class="exchangeTop">
        <p>提升信用度</p>
        <p>提升 <input type="number" value="" v-model="exchangeNum">信用值 </p>
        <p @click="GoexChange">确认提升</p>
      </div>
      <div class="exchangeCon">
        <div class="exchangeMsg">
          <span>信用值相关说明</span>
        </div>
        <ul>
          <li>
            <span>信用等级</span>
            <span>信用度大于</span>
            <span>信用度小于</span>
            <span>等级图标</span>
          </li>
          <li>
            <span>1</span>
            <span>10</span>
            <span>20</span>
            <span>
              <img src="../../../static/index/ioc-28.png" alt="">
            </span>
          </li>
          <li>
            <span>2</span>
            <span>20</span>
            <span>40</span>
            <span>
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
            </span>
          </li>
          <li>
            <span>3</span>
            <span>40</span>
            <span>70</span>
            <span>
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
            </span>
          </li>
          <li>
            <span>4</span>
            <span>70</span>
            <span>120</span>
            <span>
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
            </span>
          </li>
          <li>
            <span>5</span>
            <span>120</span>
            <span>200</span>
            <span>
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
              <img src="../../../static/index/ioc-28.png" alt="">
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {getStore} from '@/config/mUtils'

  export default {
    name: "CreditNum",
    data() {
      return {
        exchangeNum: '',
        hierarchyNum: 1, //信用等级
        UserInfo: {},
        UserInfoIco: null,
        UserInfoPage: this.$parent.UserInfoPage, //获取默认全局配置信息
        show: true
      }
    },
    created() {
      this.initDate()
    },
    computed: {
      imgUrl() {
        return require(`../../../static/credit/${this.hierarchyNum}.gif`)
      }
    },
    methods: {
      //初始化信用值
      initDate() {
        this.$axios.post('user/info', this.qs.stringify({
          "token": getStore('token')
        })).then((res) => {
          this.hierarchyNum = res.data.data.credits
          if ( this.hierarchyNum > 0 ) {
            this.show = false
          }
        });
      },
      //确认提升
      GoexChange() {
        if ( this.exchangeNum === '' ) {
          this.$toast('请输入兑换数量')
          return
        }
        this.$dialog.confirm({
          title: '支付积分',
          message: `确定使用${this.exchangeNum}金币兑换${this.exchangeNum * getStore("credit_fee")} 信用值吗？`
        }).then(() => {
          this.$axios.post('user/addcredit', this.qs.stringify({
            "token": getStore('token'),
            "credit": this.exchangeNum * getStore("credit_fee")
          })).then((res) => {
            if ( res.data.status === 1 ) {
              this.$toast.success(res.data.message)
              this.initDate()
            } else {
              this.$toast.fail(res.data.message)
            }
            this.exchangeNum = ''
          });
        }).catch(() => {
          this.$toast.fail('取消兑换')
        });
      },
      onClickLeft() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../static/css/user/user';
</style>
